
.list {
    outline: none;
    max-height: unset !important;
    background-color: transparent !important;

    &--input-container {
        top: 0;
        position: sticky;
        z-index: 1;
    }

    &--input {
        margin: 0.5rem;
        padding: 0.5rem;
        border-radius: 3px;
        background-color: var(--vscode-input-background);
        color: var(--vscode-input-foreground);

        &:focus {
            box-shadow: 0 0 0 0.125rem var(--vscode-focusBorder)
        }
    }

    &-chips {
       --gap: 0.5rem;
       --min-width: 240px;
       --max-width: calc(50% - (var(--gap)/2));

       [cmdk-list-sizer] {
           display: grid;
           /*
            * This creates a responsive grid with one or two columns, depending on the available space.
            * See https://css-tricks.com/an-auto-filling-css-grid-with-max-columns/ for more information.
            */
           grid-template-columns: repeat(auto-fill, minmax(max(var(--min-width), var(--max-width)), 1fr));
           gap: var(--gap);

       }

        .list--item {
            border-radius: 3px;
            border: 1px solid var(--vscode-dropdown-border, transparent);
            padding: 0.25rem 0.5rem;

            &[aria-selected="true"] {
                border-color: var(--vscode-list-activeSelectionBackground);
            }

            &:not([aria-selected="true"]) {
                background-color: var(--vscode-dropdown-background);
            }
        }
    }
}
